<template>
    <div class="form-block-inner">
        <div class="title-style">
          <span>
            流程节点
          <Button v-if="this.dataList.length>0&&this.offs === false" type="primary" size="small" class="btnn" @click="openAll()">全部展开</Button>
          <Button v-if="this.dataList.length>0&&this.opens === false" type="error" size="small" class="btnn" @click="offAll()">全部关闭</Button>
          </span>
        </div>
        <Collapse simple  v-model="vall">
            <Panel v-for="(val,index) in dataList" :key="index" :name="'panel' + index" ref='panels'>
                流程节点{{index+1}} - {{ val.node_title }}
                <div slot="content">
                    <yao-jian-detail :node-id="val.id"></yao-jian-detail>
                    <where-detail :node-id="val.id"></where-detail>
                    <rule-detail :node-id="val.id"></rule-detail>
                    <power-detail :node-id="val.id"></power-detail>
                    <time-detail :node-id="val.id"></time-detail>
                    <compare-detail :node-id="val.id"></compare-detail>
                    <loop-detail :node-id="val.id"></loop-detail>
                    <evaluate-detail :node-id="val.id"></evaluate-detail>
                    <node-detail :node-id="val.id"></node-detail>
                    <warning-detail :node-id="val.id"></warning-detail>
                </div>
            </Panel>
        </Collapse>
    </div>
</template>

<script>
import {
  selectSstGovFlowList
} from '@/api/setting/flow-setting.js'
import PowerDetail from './components/power-detail/index'
import WhereDetail from './components/where-detail/index'
import YaoJianDetail from './components/yaojian-detail/index'
import RuleDetail from './components/rule-detail/index'
import TimeDetail from './components/time-detail/index'
import CompareDetail from './components/compare-detail/index'
import LoopDetail from './components/loop-detail/index'
import EvaluateDetail from './components/evaluate-detail/index'
import NodeDetail from './components/node-detail/index'
import WarningDetail from './components/warning-detail/index'

export default {
  name: 'FlowDetail',
  components: {
    WarningDetail,
    NodeDetail,
    EvaluateDetail,
    LoopDetail,
    CompareDetail,
    TimeDetail,
    RuleDetail,
    YaoJianDetail,
    WhereDetail,
    PowerDetail
  },
  data () {
    return {
      dataList: [],
      nodeTitle: '',
      vall: [],
      offs: false,
      opens: true,
      baseID: ''
    }
  },
  methods: {
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getFlowNodeID () {
      selectSstGovFlowList({ gov_base_id: this.baseID }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.dataList = ret.data.data
        } else {
          this.error(data)
        }
      })
    },
    openAll () {
      console.log(this.dataList.length, 'datalist!!')
      for (let i = 0; i < this.dataList.length; i++) {
        this.vall.push('panel' + i)
      }
      this.offs = true
      this.opens = false
    },
    offAll () {
      this.vall = []
      this.opens = true
      this.offs = false
    }
  },
  mounted () {
    this.baseID = this.$route.query.id
    console.log(this.baseID, 'this.baseID')
    this.getFlowNodeID()
  }
}
</script>

<style scoped lang="less">
    /deep/ .ivu-form-item-label {
        font-weight: bold;
    }

    /deep/ .ivu-collapse {
        border: none;
    }

    /deep/ .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header {
        height: 50px;
        line-height: 50px;
        font-weight: bold;
        font-size: 15px;
    }

    .card {
        padding: 15px;
    }
    .btnn{
      margin-left: 10px;
    }
</style>
